<template>
  <div
    class="x-bar"
    :id="chartId"
    :option='option'>
  </div>
</template>

<script>
export default {
  props: {
    chartId: {
      type: String
    },
    options: {
      type: Object
    }
  },
  data () {
    return {
      option: {
        series: [{
          type: 'graph',
          layout: 'force',
          symbolSize: 60,
          focusNodeAdjacency: false,    //是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点。
          roam: true,
          draggable: true,    
          force: {
            initLayout: 'circular',
            repulsion: 5000,
            gravity: 0.001,
            edgeLength: [180, 170],
            layoutAnimation: true
          },
          edgeLabel: {
            normal: {
              show: true,
              textStyle: {
                fontSize: 14,
                color: '#ffffff'
              },
              formatter: "{c}"
            }
          },
          label: {
            normal: {
              show: true,
              color: '#fff'
            }
          },
          lineStyle: {
            width: 2,
            color: '#0febff'
          },
          data: [],
          links: []
        }]
      }
    }
  },
  mounted() {
    this.init();
  },
  watch: {
    options: {
      handler(newVal, oldVal) {
        if(this.chart) {
          if (newVal) {
            this.getSeries();
            // this.chart.setOption(this.option);
          } else {
            this.chart.setOption(this.option);
          }
        }else {
          this.init();
        }
      },
      deep: true
    }
  },
  methods: {
    init() {
      this.chart = this.$echarts.init(document.getElementById(this.chartId));
      this.getSeries();
      window.addEventListener("resize", this.chart.resize);
      this.chart.on('click', this.leftEvent);
      this.chart.on("contextmenu", this.contextmenu);
    },
    getSeries() {
      let _data = this.options,
          _this = this;
      _this.option.series[0].data = [];
      _this.option.series[0].links = [];
      _data['data'].forEach((elem, key) => {
        let _item = {
          name: elem['name'], 
          value:  elem['value']['id'], 
          symbolSize: elem['value']['symbolSize'] === 'center' ? 80 : 50,
          symbol: 'image://'+elem['value']['symbol'], 
          itemStyle: {
            normal: {
              borderWidth: 2,
              borderColor: '#f0ad0b'
            }
          },
          label: {
            position: 'bottom',
            formatter: function(val) {
              return [
                '{a|'+val['data'].name+'}{sex|}{age|'+elem['value']['age']+'}'
              ].join('\n')
            },
            rich: {
              a: {
                color: '#ffffff',
                align: 'center',
                // lineHeight: 30,
                fontSize: 12,
                padding: [3, 0, 3,5]
              },
              age: {
                color: '#ffffff',
                align: 'center',
                padding: [3,8]
              },
              sex: {
                width: 20,
                height: 20,
                align: 'center',
                backgroundColor: {
                  image: elem['value']['sex']
                },
              }
            }
          }
        };
        _this.option.series[0].data.push(_item);
        // console.log(_this.option.series[0])
      });
      _data['links'].forEach(elem => {
        _this.option.series[0].links.push(elem);
      });
      this.chart.setOption(this.option);
    },
    leftEvent(param) {
      // console.log(param)
      // 判断是否是点击的关系线   true 传递数据
      if(param.dataType != 'edge') {
        return ;
      }
      this.$emit("clickEcharts", param.data);
    },
    contextmenu(param) {
      document.oncontextmenu = function() {
        return false;
      };
      this.$emit("contextmenu", param);
    }
  }
}
</script>

<style lang="stylus" scoped>
.x-bar{
  width 100%
  height 100%
}
</style>